<template>
    <div>
        <div id="title">
            <panle title="筛查统计表" content=""></panle>
        </div>
        <div id="search" class="pt20">
            <Search
                    @setSearchForm="setSearchForm"
                    @changeSearchForm="changeSearchForm"
                    @setExport="setExport"
                    :searchForm="searchForm"
                    :searchFormObject="searchFormObject"
                    :searchOptions="searchOptions"
                    :exportOptions="true"
            ></Search>
        </div>

        <div id="searchbar" class="pt20">
            <el-button size="mini" @click="init()">刷新</el-button>
        </div>

        <div id="body">
            <el-table
                    :data="tableData"
                    border
                    ref="container"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="加载中"   
            >
                <el-table-column prop="province_name" label="省名称" align="center"></el-table-column>
                <el-table-column prop="city_name" label="城市" v-if="(searchForm.method==1) || (searchForm.method==2 && searchForm.province_id)"></el-table-column>
                <el-table-column prop="district_name" label="区县" v-if="(searchForm.method==1) || (searchForm.method==2 && searchForm.city_id)"></el-table-column>
                <el-table-column prop="institution_name" label="上报机构" v-if="(searchForm.method==1) || (searchForm.method==2 && searchForm.city_id && searchForm.district_id)"></el-table-column>

                <el-table-column align="center" label="合计">
                    <el-table-column prop="total.points" label="评分" align="center"></el-table-column>
                    <el-table-column prop="total.person_task" label="任务数" align="center"></el-table-column>
                    <el-table-column prop="total.person" label="完成数" align="center"></el-table-column>
                    <el-table-column prop="total.completion_rate" label="完成率（%）"
                                     align="center"></el-table-column>
                    <el-table-column prop="total.person_positive" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="total.positive_rate" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="total.person_positive_early" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="total.early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="total.person_treat" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="total.treat_rate" label="治疗率（%）" align="center"></el-table-column>
                </el-table-column>

                <el-table-column align="center" label="诊断性筛查">
                    <el-table-column prop="initial.person_task" label="任务数" align="center"></el-table-column>
                    <el-table-column prop="initial.person" label="完成数" align="center"></el-table-column>
                    <el-table-column prop="initial.completion_rate" label="完成率（%）" align="center"></el-table-column>
                    <el-table-column prop="initial.person_positive" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="initial.positive_rate" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="initial.person_positive_early" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="initial.early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="initial.person_treat" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="initial.treat_rate" label="治疗率%" align="center"></el-table-column>
                </el-table-column>

                <el-table-column align="center" label="随访">
                    <el-table-column prop="follow.person_task" label="任务数" align="center"></el-table-column>
                    <el-table-column prop="follow.person" label="完成数" align="center"></el-table-column>
                    <el-table-column prop="follow.completion_rate" label="完成率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow.person_positive" label="病例数" align="center"></el-table-column>
                    <el-table-column prop="follow.positive_rate" label="检出率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow.person_positive_early" label="早期病例数" align="center"></el-table-column>
                    <el-table-column prop="follow.early_rate" label="早诊率（%）" align="center"></el-table-column>
                    <el-table-column prop="follow.person_treat" label="治疗数" align="center"></el-table-column>
                    <el-table-column prop="follow.treat_rate" label="治疗率%" align="center"></el-table-column>
                </el-table-column>
            </el-table>
        </div>

        <div id="page">
            <el-pagination
                    :page-sizes="['30', '50', '80：:', '100']"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Panle from '@/components/Panle';
    import PersButton from '@/components/PersButton';
    import {listSchedule} from '@/api/total/schedule';
    import {allRegion} from "@/api/region/region";
    import {allTask} from "@/api/task/task";
    import {allInstitution} from "@/api/institution/institution";
    import Search from "@/components/common/search";
    import {lungCancerInfo} from "@/common/lungCancerInfo"    

    export default {
        components: {PersButton, Panle, Search},
        data() {
            return {
                searchOptions: {
                    province_id: false,
                    city_id: false,
                    district_id: false,
                    institution_id: false,
                    years: false,
                },
                searchForm: {
                    method: 1,
                    province_id: "",
                    city_id: "",
                    district_id: "",
                    institution_id: "",
                    years: this.global_year_time,
                    ct_date: "",
                },
                searchFormObject: [
                    {
                        label: "统计方式",
                        field: "method",
                        type: "select",
                        options: [{"id": 1, "name": "按机构"}, {"id": 2, "name": "按地区"}],
                    },
                    {
                        label: "省份",
                        field: "province_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "城市",
                        field: "city_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "区县",
                        field: "district_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "机构名称",
                        field: "institution_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "筛查年度",
                        field: "years",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "CT日期",
                        field: "ct_date",
                        type: "monthrange",
                    },
                ],
                pageSize: 30, //一页显示多少条
                total: 0,
                pageNumber: 1,
                tableData: [],
                provinceList: [],
                cityList: [],
                countyList: [],
                institutionList: [],
                taskList: [],
                searchForm: lungCancerInfo.searchForm(),
                loading: false
            };
        },
        created() {
            this.getProvinceList();
            this.getInstitutionList();
            this.getAllTask();
            this.init();
        },
        filters: {},
        methods: {
            init() {
                let role = this.$store.state.member.role;
                //省级
                if (role == 7) {
                    //搜索
                    this.searchForm.province_id = parseInt(this.$store.state.member.member.province_id);
                    this.searchOptions.province_id = true;
                } else if (role == 6) {
                    //筛查人员
                    this.searchForm.province_id = parseInt(this.$store.state.member.member.province_id);
                    this.searchForm.city_id = parseInt(this.$store.state.member.member.city_id);
                    this.searchForm.district_id = parseInt(this.$store.state.member.member.district_id);
                    this.searchForm.institution_id = this.$store.state.member.institution_id
                    this.searchOptions.province_id = true;
                    this.searchOptions.city_id = true;
                    this.searchOptions.district_id = true;
                    this.searchOptions.institution_id = true;
                }
            },
            list() {
                this.loading = true;
                let param = {
                    pageSize: this.pageSize,
                    page: this.page,
                    method: this.searchForm.method,
                    province_id: this.searchForm.province_id,
                    city_id: this.searchForm.city_id,
                    district_id: this.searchForm.district_id,
                    institution_id: this.searchForm.institution_id,
                    years: this.searchForm.years,
                    ct_date: this.searchForm.ct_date,
                    supervise: 1,
                }

                listSchedule(param).then((res) => {
                    if (res.code === 200) {
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                        //console.log(res.data)
                        this.loading = false;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getInstitutionList() {
                allInstitution().then((res) => {
                    if (res.code === 200) {
                        this.institutionList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getAllTask() {
                allTask().then((res) => {
                    if (res.code === 200) {
                        this.taskList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getProvinceList() {
                let param = {
                    pid: 1
                }
                allRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.provinceList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCityList() {
                let param = {
                    pid: this.searchForm.province_id
                }
                allRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.cityList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCountyList() {
                let param = {
                    pid: this.searchForm.city_id
                }
                allRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.countyList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            setSearchForm(searchForm) {
                this.searchForm = searchForm;
                if (!searchForm.method) {
                    this.searchForm.method = 1;
                }
                if (!searchForm.years) {
                    this.searchForm.years = this.global_year_time;
                }
                if (!searchForm.ct_date) {
                    this.searchForm.ct_date = "";
                }
                this.page = 1;
                this.init();
                this.list();
            },
            setExport(searchForm) {
                this.searchForm = searchForm;
                this.exportData();
            },
            changeSearchForm(searchForm) {
                this.searchForm = searchForm;
            },
            handleSizeChange(e) {
                this.pageSize = e;
                this.init();
                this.list();
            },
            handleCurrentChange(e) {
                this.page = e;
                this.init();
                this.list();
            },
            //数据导出
            exportData() {
                this.loading = true
                fetch(this.setQueryPath(
                        process.env.VUE_APP_API + "total/Schedule/excelExport",
                        lungCancerInfo.getparm(this)
                    )
                ).then(res=>res.blob())
                    .then(blob=>{
                        //console.log(blob)
                        const link = document.createElement('a')
                        const url = window.URL.createObjectURL(blob)
                        link.href = url
                        link.download = '肺癌统计报表.csv'
                        //link.setAttribute('download', '人员信息表.txt')
                        //document.body.appendChild(link)
                        link.click()
                        //link.remove()
                        this.loading = false
                    }
                ).catch(err=>{
                        console.log(err)
                        this.loading = false
                    }
                )
                
                // //下载数据
                // let params = {
                //     method: this.searchForm.method,
                //     province_id: this.searchForm.province_id,
                //     city_id: this.searchForm.city_id,
                //     district_id: this.searchForm.district_id,
                //     institution_id: this.searchForm.institution_id,
                //     years: this.searchForm.years,
                //     ct_date: this.searchForm.ct_date,
                //     user_id: this.$store.state.member.uid,
                //     supervise: 1,
                // };
                // window.location.href = this.setQueryPath(
                //     process.env.VUE_APP_API + "/total/Schedule/excelExport",
                //     params
                // );
            },
            setQueryPath(url, queryData) {
                var _str = "";
                for (var o in queryData) {
                    _str += o + "=" + queryData[o] + "&";
                }
                var _str = _str.substring(0, _str.length - 1);
                return url + "?" + _str;
            },
        },
        watch: {
            "searchForm.province_id"(newVal, oldVal) {
                if (oldVal !== newVal) {
                    if (newVal == "") {
                        this.searchForm.city_id = "";
                        this.searchForm.district_id = "";
                        this.searchForm.town_id = "";
                        this.searchForm.village_id = "";
                    } else {
                        this.getCityList();
                    }
                }
            },
            "searchForm.city_id"(newVal, oldVal) {
                if (oldVal !== newVal) {
                    if (newVal == "") {
                        this.searchForm.district_id = "";
                        this.searchForm.town_id = "";
                        this.searchForm.village_id = "";
                    } else {
                        this.getCountyList();
                    }
                }
            },

            "provinceList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    newVal.forEach((e) => {
                        this.searchFormObject[1].options.push({id: e.id, name: e.district});
                    })
                }
            },
            "cityList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    this.searchFormObject[2].options = [];
                    newVal.forEach((e) => {
                        this.searchFormObject[2].options.push({id: e.id, name: e.district});
                    })
                }
            },
            "countyList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    this.searchFormObject[3].options = [];
                    newVal.forEach((e) => {
                        this.searchFormObject[3].options.push({id: e.id, name: e.district});
                    })
                }
            },
            "institutionList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    newVal.forEach((e) => {
                        this.searchFormObject[4].options.push({id: e.id, name: e.institution_name});
                    })
                }
            },
            "taskList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    newVal.forEach((e) => {
                        this.searchFormObject[5].options.push({id: e.years, name: e.years});
                    })
                }
            },
        },
    }

</script>
<style lang="scss" scoped="scoped">
    #search,
    #body,
    #functional,
    #page {
        padding-top: 20px;
    }

    .el-col {
        margin-left: 15px;
    }

    .addbutton {
        margin-left: -20px;
    }

    div.el-form-item__content {
        width: 100% !important;
    }
</style>

